<template>
    <div id="backdoor">
        <div class="backdoor-wrap clearfix">
            <div class="backdoor-sidebar fl">
                <ul class="sidebar-list">
                    <li class="sidebar-item"
                        @click="link('sortManage')" 
                        :class="{active : path == 'sortManage'}">分类管理</li>
                    <li class="sidebar-item" 
                        @click="link('questionmanage')"
                        :class="{active : path == 'questionmanage'}">问题管理</li>
                    <li class="sidebar-item"
                        @click="link('feedback')"
                        :class="{active:path == 'feedback'}">问题反馈</li>
                </ul>
            </div>           
            <div class="backdoor-content fl">
                 <router-view/>
            </div>
        </div>
        
    </div>
</template>
<script>
export default {
    data(){
        return{
            path:'sortManage',

        }
    },
    methods:{
        link(path){
            this.path=path;
            this.$router.push(`/backdoor/${path}`);
        }
    }
    
}
</script>
<style lang="scss" scoped>
#backdoor{
    width: 1200px;
    box-sizing: border-box;
    margin: 0 auto;    
    .backdoor-wrap{
        margin-top: 26px;
        .sidebar-list{
            width: 266px;
            box-sizing: border-box;
            border: 1px solid #c6c6c6;
            background-color: #fff;
            padding: 2px 0;
            .sidebar-item{
                width: 100%;
                height: 52px;
                line-height: 52px;
                font-size: 20px;
                padding-left: 16px;
                color: #222121;
                box-sizing: border-box;
                position: relative;
                cursor: pointer;
                &.active{
                    background-color:#e0dede;
                    &:after{
                        content: '';
                        width: 3px;
                        height: 52px;
                        position: absolute;
                        left: 0;
                        top:0;
                        background-color: #f80a0a;
                    }
                }
            }

        }

    }
    .backdoor-content{
        width: 900px;
        height: 742px;
        margin-left: 22px;
        box-sizing: border-box;
        padding:10px  10px  0 14px;
        background-color: #fff;
        border: 1px solid #c8c8c8;
        
        .tree{
            font-size: 16px;
            .name{
                font-size: 16px;
            }
            .add{
                margin-right: 20px;

            }
            .delet{
                margin-right: 20px;

            }
        }


    }
    

}

</style>


